<template>
    <view class="other_container">
        <view class="card">
            <view class="title">
                <view class="text">用户注册</view>
            </view>
            <u-gap height="80"></u-gap>
            <view>
                <u--input type="text" placeholder="请输入姓名" v-model="userInfo.name" prefixIconStyle="font-size:36rpx" border="bottom"
                    clearable></u--input>
                <u-gap height="60"></u-gap>
                <u--input type="text" placeholder="请输入性别" v-model="userInfo.sex" prefixIconStyle="font-size:36rpx" border="bottom"
                    clearable></u--input>
                <u-gap height="60"></u-gap>
                <u--input type="text" placeholder="请输入手机号" v-model="userInfo.phone" prefixIconStyle="font-size:36rpx" border="bottom"
                    clearable></u--input>
            </view>
            <u-gap height="70"></u-gap>
            <view class="action_btns">
                <u-button type="success" @click="registerHandle()" size="large">注册</u-button>
                <u-gap height="20"></u-gap>
                <view class="vx_login" @click="toWxLogin()">手机号快捷登录</view>
            </view>
        </view>
    </view>
</template>
    
<script>
import { register } from '@/api/user.js'
export default {
    data() {
        return {
            userInfo: {
                name: "",
                sex: "",
                phone: '',
            },
        };
    },
    onLoad() { },
    methods: {
        registerHandle() {
            register(this.userInfo).then((res) => {
                if (res.code == '200') {
                    uni.$u.toast("注册成功！");
                    uni.hideLoading();
                    uni.redirectTo({ url: "/pages/login/login" });
                }
            })
        },
        toWxLogin() {
            uni.redirectTo({ url: "/pages/login/login" });
        },
    },
};
</script>
    
<style scoped lang="scss">
.other_container {
    width: 100vw;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    height: 100vh;
    /deep/.u-button--success {
		background-color: #ffcf60;
	}
    .card {
        margin: 0 auto;
        width: 85%;
        height: 810rpx;
        margin-top: 100rpx;
        background-color: #fff;
        border-radius: 20rpx;
        box-sizing: border-box;
        padding: 32rpx;
        box-shadow: 0 8rpx 12rpx -4rpx rgba(0, 0, 0, 0.1), 0 8rpx 16rpx -8rpx rgba(0, 0, 0, 0.1);

        .title {
            width: 100%;
            text-align: center;

            .text {
                font-size: 48rpx;
                color: #444;
            }
        }
        .text{
			font-size: 28rpx;
			color: #ffcf60;
		}
        .retrieve_pwd {
            text-align: right;
            font-size: 28rpx;
            color: #ffcf60;
        }

        .action_btns {
            display: flex;
            flex-direction: column;

            .vx_login {
                text-align: center;
                font-size: 28rpx;
                color: #444;
                width: 100%;
                height: 100rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
            }
        }
    }
}
</style>
    